<div>
    <div class="breadcrumb">
        <a class="prev" onclick="history.go(-1)"></a>
        <a class="next" onclick="history.go(1)"></a>
    </div>
    <div class="tab-head">
            <div>
                <label>{{'guide.name'|translate}}</label>
                <input nz-input style="width: 120px;" [(ngModel)]="page.name" placeholder="{{'guide.name'|translate}}{{'placeholder.search'|translate}}" />
            </div>
            <div>
                <label>{{'guide.agencyName'|translate}}</label>
                <nz-select style="width: 180px;" [(ngModel)]="page.travelAgencyId" nzPlaceHolder="{{'guide.agencyName'|translate}}{{'placeholder.search'|translate}}">
                    <nz-option *ngFor="let i of travelAgencyList" [nzLabel]="i.name" [nzValue]="i.id"></nz-option>
                </nz-select>
            </div>
            <div>
                <label>{{'guide.createTime'|translate}}</label>
                <nz-range-picker [(ngModel)]="dateRange" style="width:240px" [nzPlaceHolder]="[placeholder.timestart,placeholder.timeover]" (ngModelChange)="onChange($event)"></nz-range-picker>
            </div>
            <div>
                <button nz-button class="noradius" nzType="primary" (click)="searchList()">{{'placeholder.search'|translate}}</button>
            </div>
    </div>
    <div class="tab-title">
        {{'guide.listTitle'|translate}}
        <a routerLink="/basicSetting/guideAdd">{{'guide.addGuide'|translate}}</a>
    </div>
    <nz-table class="medical-table" #columnTable [nzSize]='small' [nzTotal]="page.pages" [nzPageIndex]="page.pageNo" nzPageSize="10" (nzPageIndexChange)="changeCurrentPage($event)" [nzFrontPagination]="false" [nzLoading]="tableLoading"
        [nzData]="dataList">
        <thead>
            <tr>
                <th nzWidth="100px" nzAlign="center">{{'guide.id'|translate}}</th>
                <th nzWidth="150px" nzAlign="center">{{'guide.name'|translate}}</th>
                <th nzWidth="150px" nzAlign="center">{{'guide.createTime'|translate}}</th>
                <th nzAlign="center">{{'guide.agencyName'|translate}}</th>
                <th nzWidth="100px" nzAlign="center">{{'guide.status'|translate}}</th>
                <th nzWidth="120px" nzAlign="center">{{'guide.followCount'|translate}}</th>
                <th nzWidth="100px" nzAlign="center">{{'guide.serviceCount'|translate}}</th>
                <th nzWidth="100px" nzAlign="center">{{'guide.reservationFee'|translate}}</th>
                <th nzWidth="180px" nzAlign="center">{{'cz.title'|translate}}</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of columnTable.data">
                <td nzWidth="100px" nzAlign="center">{{ data.id }}</td>
                <td nzWidth="150px" nzAlign="center">{{ data.name }}</td>
                <td nzWidth="150px" nzAlign="center">{{ data.createTime }}</td>
                <td nzAlign="center">{{ data.agencyName }}</td>
                <td nzWidth="100px" nzAlign="center">
                    <nz-tag *ngIf="data.status === 'N'" [nzColor]="'#f50'">{{'agencyStatus.N'|translate}}</nz-tag>
                    <nz-tag *ngIf="data.status === 'Y'" [nzColor]="'#87d068'">{{'agencyStatus.Y'|translate}}</nz-tag>
                </td>
                <td nzWidth="120px" nzAlign="center">{{ data.followCount}}</td>
                <td nzWidth="100px" nzAlign="center">{{ data.serviceCount}}</td>
                <td nzWidth="100px" nzAlign="center">{{ data.reservationFee}}</td>
                <td nzWidth="180px" nzAlign="center">
					<a routerLink="/basicSetting/guideDetail" [queryParams]="{ id : data.id}">{{'cz.detail'|translate}}</a>
					<a routerLink="/basicSetting/guideAdd" [queryParams]="{ id : data.id}">{{'cz.edit'|translate}}</a>
					<a *ngIf="data.status === 'Y'" (click)="confirmStatus('N',data.id)">{{'cz.down'|translate}}</a>
					<a *ngIf="data.status === 'N'" (click)="confirmStatus('Y',data.id)">{{'cz.up'|translate}}</a>
				</td>
            </tr>
        </tbody>
    </nz-table>
</div>